<template>
    <div class="qdsq app-container">
        <el-form :inline="true">
<!--            <el-form-item>-->
<!--                <el-select v-model="yeartype" placeholder="年份类型" clearable size="small" >-->
<!--                    <el-option label="自然年" :value='0' />-->
<!--                    <el-option label="灌溉年" :value='1' />-->
<!--                </el-select>-->
<!--            </el-form-item>-->
            <el-form-item>
                <el-date-picker v-model="syear" size="small" style="width: 140px" value-format="yyyy" type="year" placeholder="开始年份" />
                至
                <el-date-picker v-model="eyear" size="small" style="width: 140px" value-format="yyyy" type="year" placeholder="结束年份" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuerynn">搜索</el-button>
            </el-form-item>
        </el-form>

        <el-table stripe v-loading="loading" border :data="sslist" :height='tableHeight' >
            <!-- <el-table-column prop="statCd" label="测站代码" align="left" ></el-table-column>
            <el-table-column prop="statNm" label="测站名称" align="left" ></el-table-column> -->
            <el-table-column prop="statYr" label="年份" align="left" ></el-table-column>
            <el-table-column prop="yrVol" label="年水量(万m³)" align="left" ></el-table-column>
        </el-table>

        <div class="tb_wz" >
            <div v-show="ecshow" @click="ckgd" >展开更多信息</div>
            <div v-show="!ecshow" @click="ckgd" >隐藏更多信息</div>
        </div>

        <div v-show="ecshow" id="jcsjtcl_echarsn" v-loading="loading" ></div>

    </div>
</template>

<script>
import { getntjlist } from "@/api/measurement/watermonitor"
import echarts from 'echarts'


export default {
    name: "watermonitor",
    props:['czid'],
    data() {
        return {
            //测站统计
            cztgitem:{
                znum: 0,
            },
            syear:'',
            eyear:'',
            yeartype: 1,
            // 列表高度
            tableHeight:260,
            ecshow:true,
            // 遮罩层
            loading: true,
            sslist:[]
        };
    },
    created() {
    },
    mounted () {
        var wd = document.body.clientWidth*0.58;
        document.getElementById("jcsjtcl_echarsn").style.width = wd+"px";
        this.getlsimgnn(this.$props.czid);
    },
    methods: {
        handleQuerynn(){
            this.getlsimgnn(this.$props.czid);
        },
        ckgd(){
            const z = this.ecshow;
            if(z){
                this.ecshow = false;
                this.tableHeight = 580;
            }else{
                this.ecshow = true;
                this.tableHeight = 260;
            }
        },
        getlsimgnn(czid){

            var pd = {
                statCd : czid,
                beginYr: this.syear,
                endYr: this.eyear,
                yeartype: this.yeartype
            }
            const _t = this;
            _t.loading = true;

            getntjlist(pd).then(response => {

                _t.sslist = response.rows;
                const dlist = response.rows;
                const sjlist = [];
                const swlist = [];
                for (let i = 0; i < dlist.length; i++) {
                    sjlist.push(dlist[i].statYr);
                    swlist.push(dlist[i].yrVol);
                }
                _t.loadecharts(sjlist.reverse(),swlist.reverse());
                _t.loading = false;
            });
        },
        loadecharts(sjlist,sllist) {
            // 基于准备好的dom，初始化echarts实例
            var echarts = require('echarts');
            var myChart = echarts.init(document.getElementById('jcsjtcl_echarsn'))
            // 绘制图表
            myChart.setOption({
                color:['#FEC852','#51B1FF'],
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '5%',
                    top: '30%',
                    containLabel: true
                },
                title: {
                    text: '年水量统计过程图',
                    left: 'left',
                    textStyle:{
                        //文字颜色
                        color:'#1699F3',
                        //字体风格,'normal','italic','oblique'
                        fontStyle:'normal',
                        //字体粗细 'normal','bold','bolder','lighter',100 | 200 | 300 | 400...
                        fontWeight:'bold',
                        //字体系列
                        fontFamily:'sans-serif'
                    }

                },
                tooltip: {
                    trigger: 'axis',
                    formatter(params){
                        let fParams = params[0];
                        return fParams.name + ' <br> 年水量 : '+fParams.value + ' m³';
                    }
                },
                xAxis: {
                    type: 'category',
                    data: sjlist,
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: '#9e9e9e'
                        }
                    },
                },
                yAxis : [
                    {
                        name: '(m³)',
                        type: 'value',
                    }
                ],
                series: [{
                    type: 'bar',
                    barMaxWidth: '30',

                    itemStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            { offset: 0, color: '#83bff6' },
                            { offset: 0.5, color: '#188df0' },
                            { offset: 1, color: '#188df0' }
                        ])
                    },
                    emphasis: {
                        itemStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            { offset: 0, color: '#2378f7' },
                            { offset: 0.7, color: '#2378f7' },
                            { offset: 1, color: '#83bff6' }
                        ])
                        }
                    },
                    data: sllist
                    }
                ]
            });
        }
    }
};
</script>

<style rel="stylesheet/scss" lang="scss">

    #jcsjtcl_echarsn{
        width: 300px;
        height: 260px;
        margin: 30px auto;
    }

</style>
